<template>
  <div>
    <div class="header">
      <el-form inline>
        <el-form-item label="项目名称">
          <el-input v-model="searchName"></el-input>
        </el-form-item>
        <el-button @click="doGetShowTemps()">搜索</el-button>
        <el-button @click="addFormVisible=true">添加模板</el-button>
      </el-form>
    </div>
    <div class="container">
      
      <el-table :data="tempList">
        <el-table-column
          width="80"
          label="序号"
          prop="DSST_ID"
        ></el-table-column>
        <el-table-column
          width="150"
          label="模板名称"
          prop="DSST_Name"
        ></el-table-column>
        <el-table-column
          label="模板类型"
          prop="DSPJ_Name"
        ></el-table-column>
        <el-table-column
          width="120"
          label="创建人"
          prop="USR_Name"
        ></el-table-column>
        <el-table-column
          width="150"
          label="创建时间"
          prop="DSST_CreateDate"
        ></el-table-column>
        <el-table-column label="备注" prop="DSST_Remark"></el-table-column>
        <el-table-column width="150" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="toDetailPage(scope.row)">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="pageIndex"
        :total="total"
        :page-size.sync="pageSize"
        :page-sizes="[10, 20]"
        @size-change="
          (val) => {
            pageSize = val
            doGetShowTemps()
          }
        "
        @current-change="doGetShowTemps()"
      />
    </div>

    <el-dialog title="添加大屏模板" :visible.sync="addFormVisible">

      <el-form ref="form" :model="form" label-width="150px">

        <el-form-item label="模板名称">
          <el-input v-model="form.DSST_Name"></el-input>
        </el-form-item>

        <el-form-item label="模板类型">
          <el-select v-model="form.DSST_Type" placeholder="请选择模板类型">
            <el-option label="基础模板" value="1"></el-option>
            
          </el-select>
        </el-form-item>

        <el-form-item label="备注">
          <el-input v-model="form.DSST_Remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAddShowTemp">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
  <script>
import { baseURL } from '@/config'
import {
  AddShowTemp,GetShowTemps  
} from '@/api/project/show.js'

export default {
  computed: {},
  data: function () {
    return {
      addFormVisible: false,
      searchName: null,
      form: {
        DSST_Name: '',
        DSST_Type: 0,
        DSST_Remark:'' ,
      },
      total: 0,
      pageIndex: 1,
      pageSize: 10,
      loading: false,
      tempList: [],

    }
  },
  methods: {

    doAddShowTemp() {
      if (this.form.DSST_Name == '' || this.form.DSST_Type == 0) {
        this.$message('请输入模板名并选择模板类型')
        return
      }
      AddShowTemp(this.form)
        .then((r) => {
          this.dialogFormVisible = false
          this.form = {
            DSST_Name: '',
            DSST_Type: '',
          }
        })
        .catch((e) => {
          this.$message(e.errormsg)
        })
    },
    doGetShowTemps() {
      GetShowTemps(this.pageIndex, this.pageSize, this.searchName).then((r) => {
        this.tempList = r.data.datas
        this.total = r.data.total
      })
    },
    toDetailPage(row) {
      var path = ''
      console.log(row)
      if (row.DSPJ_Type == 1) {
        path = 'survey'
      } else {
        path = 'position'
      }
      this.$router.push({
        name: path,
        query: { id: row.DSPJ_ID, type: 1 },
      })
    },
  },
  mounted: function () {
    this.doGetShowTemps()
  },
}
</script>
  
  <style scoped>
.header {
  padding: 20px;
}
.container {
  padding: 20px 10px;
  height: 80%;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
  